<template>
  <p-card :bordered="false" :class="'cust-erp-sub-tab'">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <p-button @click="addNewlist" type="primary" :disabled="change">新增</p-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :scroll='tableScroll'
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        >
        <template slot="loseReason" slot-scope="text,row" >
          <p-input v-if="row.ischange" style="text-align:center" v-model="row.loseReason"></p-input>
          <p v-else>{{text}}</p>
        </template>

        <template slot="manhourQty" slot-scope="text,row" >
          <p-input v-if="row.ischange" style="text-align:center" v-model="row.manhourQty"></p-input>
          <p v-else>{{text}}</p>
        </template>

        <template slot="action" slot-scope="text,row" >
          <a  v-show="!row.ischange" @click.prevent='changeList(row)' :disabled="change">编辑</a>
          <a v-show="row.ischange" @click.prevent='saveList(row)'>保存</a>

          <a @click.prevent='getNewList(row)' style="margin-left:20px" :disabled="change">删除</a>  
        </template>
      </p-table>
    </div>
    <mesHrMonthlyEdDetail-modal ref="modalForm"  :EnhanceJS="EnhanceJS"  @getlist="getlist" :mainId="mainId"></mesHrMonthlyEdDetail-modal>
  </p-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import MesHrMonthlyEdDetailModal from './MesHrMonthlyEdDetailModal'
  import ButtonExpHandler from '@/components/jeecgbiz/modules/ButtonExpHandler'
  import { postAction,getAction,deleteAction } from '@/api/manage'
  import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'


  export default {
    name: "MesHrMonthlyEdDetailList",
    mixins:[JeecgListMixin],
    components: { MesHrMonthlyEdDetailModal },
    props:{
      mainId:{
        type:String,
        default:'',
        required:false
      },
      id:{
        default:'',
        required:false
      },
      change:{
        default:'',
        required:false
      }
    },
    watch:{
      mainId:{
        immediate: true,
        handler(val) {
          if(!this.mainId){
            this.clearList()
          }else{
            this.queryParam['monthlyEdId'] = val
            this.loadData(1);
          }
        }
      },
      id:{
        immediate: true,
        handler(val){
          if(this.id){
            console.log(this.id)
           getAction(this.url.list+this.id).then(res=>{
             if(res.code==0){
               this.dataSource=res.data.mesHrSemdDetailDtos || []
             }else{
               this.$message.error(res.msg)
             }
           })
          }
        }
      }
    },
    data () {
      return {
        description: '月度人员名额申报管理页面',
        disableMixinCreated:true,
        EnhanceJS:'',
        cgButtonLinkList: [],
        cgButtonList: [],
        code: '',
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'工号', 
            align: 'center',
            dataIndex: 'empno',
          },
          {
            title:'员工姓名',
            align: 'center',
            dataIndex: 'empname',
          },
          {
            title:'工时量',
            align: 'center',
            width:150,
            dataIndex: 'manhourQty',
            scopedSlots: { customRender: 'manhourQty' },
          },
          {
            title:'损失原因',
            align: 'center',
            width:150,
            dataIndex: 'loseReason',
            scopedSlots: { customRender: 'loseReason' },
          },
          
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: '/mes-manpower/mesHrSpecialEmpManhourDeclare/',
          getColumns: '/mes-manpower/online/cgform/api/getColumns/',
          buttonAction: '/mes-manpower/online/cgform/api/doButton',
        },
        dictOptions:{
         approveStatus: [],
        },

      }
    },

    computed:{
      tableScroll:function(){
        if(this.columns.length > 12){
          return { x: this.columns.length*160+40 }
        }
      }
    },

    created() {
      this.setdefColumns();
    },
    methods: {
      setdefColumns(){
        if(this.columns.length > 12){
          let arrLength = this.columns.length-1
          this.columns[arrLength]['fixed'] = 'right'
          this.columns[arrLength]['width'] = 200
          this.columns[0]['width'] = 70
          this.columns[0]['fixed'] = 'left'
        }
      },
      addNewlist(){
        this.$refs.modalForm.visible=true
        this.$refs.modalForm.form= {
        uid: "",
        workroomname: "",
        workroomcode: "",
        classname: "",
        classno: "",
        station: "",
	  }
      },
      getlist(data){
        this.dataSource.push(data)
        let newobj = {}; 
        this.dataSource = this.dataSource.reduce((preVal, curVal) => {
          newobj[curVal.empno] ? '' : newobj[curVal.empno] = preVal.push(curVal); 
          return preVal 
        }, [])
      },
      getNewList(row){
        this.dataSource=this.dataSource.filter(item=>{return item.id!=row.id})
      },
      changeList(val){
        console.log(val.ischange)
        this.$set(val,'ischange',true)
      },
      saveList(val){
        console.log(val)
        this.$set(val,'ischange',false)
      },
      //确定按钮
      handleSearch(selectedKeys, confirm, dataIndex) {
        confirm();
        this.searchText = selectedKeys[0];
        this.searchedColumn = dataIndex;
      },
      //取消按钮
      handleReset(clearFilters) {
        clearFilters();
        this.searchText = '';
      },
      //确定时间
      handleSearchDate(selectedKeys, confirm, dataIndex){
        confirm();
        this.searchText = selectedKeys[0];
        this.searchedColumn = dataIndex;
        this.searchQuery()
      },
      // 清除时间
      handleResetDate(clearFilters,begin,end) {
        if(this.queryParam[begin] || this.queryParam[end]){
          this.queryParam[begin] = ''
          this.queryParam[end] = ''
          clearFilters();
          this.searchText = '';
          this.searchQuery()
        }else{
          clearFilters();
          this.searchText = '';
        }

      },
      getKey () {
        const dataItem = []
        setTimeout(() => {
          this.columns.forEach(item => {
            dataItem.push({ 'text': item.title, 'value': item.dataIndex })
          })
        }, 100)
        return dataItem
      },
      getControl (dic) {
        const dataItem = []
        initDictOptions(dic).then((res) => {
          res.data.forEach(item => {
            dataItem.push({ 'text': item.text, 'value': item.value })
          })
        })
        return dataItem
      },

      clearList(){
        this.dataSource=[]
        this.selectedRowKeys=[]
        this.ipagination.current = 1
      },
        //2020/7/9
        initDictConfig(){
        },
          showLinkButton(item,record){
              let btn = new ButtonExpHandler(item.exp,record);
              return btn.show;
          },
                initCgEnhanceJs(enhanceJs){
                  //console.log("--onlineList-js增强",enhanceJs)
                  if(enhanceJs){
                    let Obj = eval ("(" + enhanceJs + ")");
                    this.EnhanceJS = new Obj(getAction,postAction,deleteAction);
                    this.cgButtonJsHandler('created')
                  }else{
                    this.EnhanceJS = ''
                  }
                },
                initCgButtonList(btnList){
                  let linkArr = []
                  let buttonArr = []
                  if(btnList && btnList.length>0){
                    for(let i=0;i<btnList.length;i++){
                      let temp = btnList[i]
                      if(temp.buttonStyle=='button'){
                        buttonArr.push(temp)
                      }else if(temp.buttonStyle=='link'){
                        linkArr.push(temp)
                      }
                    }
                  }
                  this.cgButtonLinkList = [...linkArr]
                  this.cgButtonList=[...buttonArr]
                  console.log("链接增强", this.cgButtonLinkList);
                },
                cgButtonJsHandler(buttonCode){
                  if(this.EnhanceJS[buttonCode]){
                    this.EnhanceJS[buttonCode](this)
                  }
                },
                cgButtonActionHandler(buttonCode){
                  //处理自定义button的 需要配置该button自定义sql
                  if(!this.selectedRowKeys || this.selectedRowKeys.length==0){
                    this.$message.warning("请先选中一条记录")
                    return false
                  }
                  if(this.selectedRowKeys.length>1){
                    this.$message.warning("请只选中一条记录")
                    return false
                  }
                  let params = {
                    formId:this.code,
                    buttonCode:buttonCode,
                    dataId:this.selectedRowKeys[0]
                  }
                  console.log("自定义按钮请求后台参数：",params)
                  postAction(this.url.buttonAction,params).then(res=>{
                    if(res.success){
                      this.loadData()
                      this.$message.success("处理完成!")
                    }else{
                      this.$message.warning("处理失败!")
                    }
                  })

                },
                cgButtonLinkHandler(record,buttonCode,optType){
                  if(optType=="js"){
                    if(this.EnhanceJS[buttonCode]){
                      this.EnhanceJS[buttonCode](this,record)
                    }
                  }else if(optType=="action"){
                    let params = {
                      formId:this.code,
                      buttonCode:buttonCode,
                      dataId:record.id
                    }
                    console.log("自定义按钮link请求后台参数：",params)
                    postAction(this.url.buttonAction,params).then(res=>{
                      if(res.success){
                        this.loadData()
                        this.$message.success("处理完成!")
                      }else{
                        this.$message.warning("处理失败!")
                      }
                    })
                  }
                },
        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
